<template>
  <el-space wrap>
    <el-card class="box-card" style="width: 200px">
      <div v-for="(ct,i) in cts"
           :style="style[i]"
           @click="style[b]=item,b=i,style[i]=item1,getMessage(b)"
           @mouseover="style[i]=item1"
           @mouseout="b!=i?style[i]=item:0"
      >
<!--      <div v-for="(ct,i) in cts" class="item1">-->
        <span style="float: left;margin-top: 20px">{{ct}}</span>
      </div>

    </el-card>
<!--   评论和回复-->
    <div >
      <el-card  v-if ="b==0"  class="box-card">
        <span style="font-size: 20px;
                      font-weight: bolder;"
        >{{cts[0]}}</span>
        <el-link style="margin-left: 700px" type="success" @click="deleteComments()">全部已读</el-link>
        <el-divider/>
        <div v-if="comments.length==0" style="width: 200px;height: 400px;margin-left: 300px">
          <div style="height: 140px"></div>
          <svg-icon icon="空"  style="margin-left:70px; font-size:60px"></svg-icon><br>
          <span style="margin-left: 60px;font-weight: bold;font-size: 20px;color: #707070">暂无消息</span>
        </div>
        <div style="height: 400px;overflow:auto">
          <el-card style="margin-bottom: 10px" v-for="comment in comments">
            <el-avatar :src="comment.avatar"></el-avatar>

              <span style="margin-bottom: 10px">{{comment.nickName}}</span>
            <span v-if="comment.reply.parentId==null" style="color: #b0b0b0"> 评论你的博文</span>
            <span v-else style="color: #b0b0b0"> @了你</span>
            <v-else></v-else>
            <router-link
                :to="'detail?userId='+comment.authorId+'&articleId='+comment.articleId"
                style="margin-left: 20px;font-size: 18px;font-weight: bold;text-decoration: underline"
            >{{comment.articleTitle}}</router-link>
            <svg-icon icon="错" style="float: right" @click="deleteComment(comment.reply.id)"></svg-icon>
            <span style="float: right">{{comment.reply.createTime}}</span>
            <el-divider style="margin: 10px 0px 10px 0px"></el-divider>
            <span>{{comment.reply.commentContent}}</span>
          </el-card>
        </div>

      </el-card>
    </div>
<!--    赞和收藏-->
    <div>
      <el-card  v-if ="b==1"  class="box-card">
        <span style="font-size: 20px;
                      font-weight: bolder;"
        >{{cts[1]}}</span>
        <el-link style="margin-left: 760px" type="success" @click="deleteMessages()">清空所有消息</el-link>
        <el-divider/>
        <div style="height: 400px;overflow:auto">
          <div v-if="message.length==0" style="width: 200px;height: 400px;margin-left: 300px">
            <div style="height: 140px"></div>
            <svg-icon icon="空"  style="margin-left:70px; font-size:60px"></svg-icon><br>
            <span style="margin-left: 60px;font-weight: bold;font-size: 20px;color: #707070">暂无消息</span>
          </div>
          <div v-for="m in message">
            <div>
              <div style="float: left; margin-right: 10px">
                <el-avatar :src="m.avatar" size="large"></el-avatar>
              </div>
              <div style="float: left;width: 90%;height: 40px" >
                <span style="font-size: 20px">{{m.nickName}} </span>
                <span style="color: #b0b0b0">{{m.type}}</span>
                <svg-icon icon="错" style="float: right" @click="deleteMessage(m.message.id)"></svg-icon>
              </div>
              <div style="float: left;width: 90%;height: 40px" >
                <router-link
                    :to="'detail?userId='+m.authorId+'&articleId='+m.articleId"
                    style="font-size: 18px;font-weight: bold"
                >
                  <span>{{m.articleTitle}}</span>
                </router-link>
                <span style="float: right">{{m.message.createTime}}</span>

              </div>

            </div>
            <el-divider style="float: left;margin-top: -10px"></el-divider>
          </div>
        </div>
      </el-card>
    </div>
<!--    系统消息-->
    <div>
      <el-card  v-if ="b==2"  class="box-card">
        <span style="font-size: 20px;
                      font-weight: bolder;"
        >{{cts[2]}}</span>
        <el-divider/>
        <div v-if="message.length==0" style="width: 200px;height: 400px;margin-left: 300px">
          <div style="height: 140px"></div>
          <svg-icon icon="施工中"  style="margin-left:70px; font-size:60px"></svg-icon><br>
          <span style="margin-left: 60px;font-weight: bold;font-size: 20px;color: #707070">等待开发</span>
        </div>
      </el-card>
    </div>
<!--    等待开发-->
    <div>
      <el-card  v-if ="b==3"  class="box-card">
        <span style="font-size: 20px;
                      font-weight: bolder;"
        >{{cts[3]}}</span>
        <el-divider/>
        <div style="width: 200px;height: 400px;margin-left: 300px">
          <div style="height: 60px"></div>
          <svg-icon icon="施工中"  style="margin-left:70px; font-size:60px"></svg-icon><br>
          <span style="margin-left: 60px;font-weight: bold;font-size: 20px;color: #707070">等待开发</span>
        </div>
      </el-card>
    </div>

  </el-space>
</template>

<script setup>

import {ref,reactive} from "vue";
import request from "@/utils/request";
import {onMounted} from "vue-demi";

const b= ref(0)
const comments = ref([])
const message = ref([])
const user = ref({})
const cts = ref([
    '评论和@',
    '赞和收藏',
    '系统信息',
    '等待开发'
])
const item =
    '  overflow:hidden;\n' +
    '  margin-left: -20px;\n' +
    '  padding: 10px 10px 10px 40px;\n' +
    '  height: 60px;\n' +
    '  width: 176px;\n' +
    '  font-size: 20px;\n' +
    '  font-weight: bolder;'

const style = ref([
    item,item,item,item
])

onMounted(async ()=>{
  let result = await request.get("user/getuser")
  let data = result.data
  if(data.code === 200){
      user.value = data.data
    console.log(user);
  }
  await getComment()
})

const item1='overflow:hidden;\n' +
    '  margin-left: -20px;\n' +
    '  padding: 10px 10px 10px 40px;\n' +
    '  height: 60px;\n' +
    '  width: 176px;\n' +
    '  font-size: 20px;\n' +
    '  font-weight: bolder;\n' +
    '  background-color: #e3dfdf;'

const getMessage = (i)=>{
  switch (i){
    case 0: getComment();break
    case 1: getMessages();break
  }
}
//获取评论和@
const getComment = async ()=>{
  let result = await request.get("comment/getreply?userId="+user.value.id)
  let data = result.data
  if(data.code === 200){
    comments.value = data.data
    console.log(data.msg)
  }else{
    console.log(data.msg)
  }
}
//已读回复
const deleteComment = async (id)=>{
  let result = await request.get("comment/updatereply?id="+id)
  let data = result.data
  if(data.code === 200){
    console.info(data.msg)
    await getComment()
  }else{
    console.info(data.msg)
  }
}
//标记全部已读
const deleteComments = async ()=> {
  let result = await request.get("comment/readall?userId="+user.value.id)
  let data = result.data
  if(data.code === 200){
    console.log(data.msg)
    await getComment()
  }else{
    console.log(data.msg)
  }
}
//获取全部消息
const getMessages = async ()=>{
  let result = await request.get("message/getmessage?userId="+user.value.id)
  let data = result.data
  if(data.code === 200){
    console.log(data.msg)
    message.value = data.data
  }else {
    console.log(data.msg)
    message.value = data.data
  }

}
//删除单条消息
const deleteMessage = async (id)=>{
  let result = await request.del("message/deletemessage?id="+id)
  let data = result.data
  if(data.code === 200){
    console.log(data.msg)
    await getMessages()
  }else{
    console.log(data.msg)
  }
}
//清空消息
const deleteMessages = async ()=>{
  let result = await request.del("message/deletemessages?userId="+user.value.id)
  let data = result.data
  if(data.code === 200){
    console.log(data.msg)
    await getMessages()
  }else{
    console.log(data.msg)
  }
}
</script>

<style scoped>
.item1{
  font-size:20px;
  font-weight: bolder;
  background-color: #e3dfdf;
}
.item1{
  overflow:hidden;
  margin-left: -20px;
  padding: 10px 10px 10px 40px;
  height: 60px;
  width: 176px;
  font-size: 20px;
  font-weight: bolder;
  background-color: #e3dfdf;
}
</style>